<template>
	<div class="wrapper">
		<div class="titel-row">
			<div class="home-icon">
				<img src="../../assets/inquiryRegister/home.png" alt>
			</div>
			<div class="title">核发记录</div>
		</div>
		<div class="content">
			<SearchHeader v-on:callback="onSearchCallback" v-bind:config="searchConfig" />
			<div class="table-wrapper">
				<el-table 
                :row-class-name="tableRowClassName" 
                stripe ref="multipleTable" 
                :data="tableData" 
                tooltip-effect="dark" 
                style="width: 100%" 
                row-key="id">
					<!-- <el-table-column type="selection" width="55"></el-table-column> -->
					<el-table-column 
						v-for="(item,index) in thConfig" 
						:key="index" 
						v-bind:prop="item.prop"
						:formatter = "item.formatter"
						v-bind:label="item.label"></el-table-column>
					<el-table-column label="操作" width="180">
						<template slot-scope="scope">
							<el-tooltip content="查看" placement="top">
								<el-button v-on:click="onDetail(scope.row)" icon="el-icon-search" size="small" circle />
							</el-tooltip>
							<!-- <el-tooltip content="编辑" placement="top">
								<el-button v-on:click="onDetail(scope.row)" type="primary" icon="el-icon-edit-outline" size="small" circle />
							</el-tooltip>
							<el-tooltip content="删除" placement="top">
								<Popover title="定删除吗？" @onConfirm="deleteHandler(scope.row)">
									<el-button style="margin-left: 10px" type="danger" icon="el-icon-delete" size="small" circle />
								</Popover>
							</el-tooltip>
							<el-tooltip content="驳回" placement="top">
								<el-button style="margin-left: 10px" v-on:click="rejectHandler(scope.row)" size="small" circle>
									<img style="width:12px" src="../../assets/inquiryRegister/reject.png">
								</el-button>
							</el-tooltip> -->
						</template>
					</el-table-column>
				</el-table>
				<!-- <div class="handle-row">
					<button v-on:click="openModal(item.type,{isCreate:true,item})" class="handle-btn" v-bind:class="[item.color]" v-for="(item,index) in buttonConfig" :key="index" :disabled="item.type=='dispatch'&&(multipleSelection&&multipleSelection.length==0)">
						<img :src="item.icon" alt>
						<span>{{item.name}}</span>
					</button>
				</div> -->
			</div>
			<div class="pager">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listRequest.pageNum" :page-size="10" prev-text="上一页" next-text="下一页" layout="total, prev, pager, next" :total="total"></el-pagination>
			</div>
		</div>
		<AddDialog/>
		<ViewDetail  width="800px" :dialogVisible="detailVisible" @onClose="detailVisible=false" :list="detailData" :columns="detailColumns" />
		<RejectDialog :dialogVisible="rejectVisible" @onClose="rejectVisible=false" @callBack="getList" :record="rejectItem" />
	</div>
</template>

<script>
import SearchHeader from "../../components/layout/searchHeader.vue"; //搜索栏
import AddDialog from "../../components/inquiryRegister/addDialog.vue"; //新增dialog
import { Popover, ViewDetail } from "../../components/common"; //小弹窗
import RejectDialog from "../../components/inquiryRegister/rejectDialog.vue"; //驳回弹窗
import Pubsub from "../../utils/pubsub";
import {
	getTimeStr
} from "../../utils";
const addIcon = require("../../assets/inquiryRegister/add.png");
const editIcon = require("../../assets/inquiryRegister/edit.png");
const deleteIcon = require("../../assets/inquiryRegister/delete.png");
const dispatchIcon = require("../../assets/inquiryRegister/dispatch.png");
const rejectIcon = require("../../assets/inquiryRegister/reject.png");
import {
    getMakeCardList,
    deletePretrial,
    findByDictCode,
    distribute,
    getZzDetailById
} from "../../config/api.js";
export default {
    components: {
        SearchHeader,
        AddDialog,
        Popover,
        ViewDetail,
        RejectDialog
    },
    data() {
        return {
            listRequest: { pageNum: 1, pageSize: 10 }, //列表请求餐来
            detailVisible: false, //详情窗口显示隐藏
            rejectVisible: false, //驳回窗口显示隐藏
            detailData: {}, //详情数据
            rejectItem: {}, //驳回项的数据
            areaCode: [], //数据字典返回值--区域
            multipleSelection: [], //选中的项
            total: 0, //共多少条
            thConfig: [
				{ prop: "applyPersonName", label: "申请单位/人" },
                { prop: "handleInfoName", label: "办理事项" },
				{ prop: "getPersonName", label: "取证人" },
                { prop: "telNo", label: "联系电话" },
                { prop: "getTypeName", label: "核发方式" ,formatter:function(row){
					if(row.getTypeName === "到付邮寄"){
						return <span style = {{color:"#00a01e"}}>{row.getTypeName}</span>
					}
					return row.getTypeName
				}},
                { prop: "issueTime", label: "核发时间" ,formatter:function(row,column){
					return getTimeStr(row.issueTime);
				} },
                // { prop: "receiptStatus", label: "回执状态" ,formatter:function(row){
				// 	if(row.receiptStatus === "未接收"){
				// 		return <span style = {{color:"red"}}>{row.receiptStatus}</span>
				// 	}
				// 	return row.receiptStatus
				// }},
                // { prop: "receipPersonName", label: "回执人" }
            ], //table头部配置
            tableData: [
               
            ],
            // buttonConfig: [
            //     {
            //         name: "新增",
            //         icon: addIcon,
            //         type: "showAddInquiryListDialog",
            //         color: "main"
            //     },
            //     {
            //         name: "分发",
            //         icon: dispatchIcon,
            //         type: "dispatch",
            //         color: "green"
            //     }
            //     // {name:"修改",icon:editIcon,type:"edit",color:"green"},
            //     // {name:"删除",icon:deleteIcon,type:"delete",color:"default"},
            //     // {name:"驳回",icon:rejectIcon,type:"reject",color:"default"},
            // ],
            searchConfig: [
                //搜索栏配置
                {
                    label: "申请单位/人",
                    code: "keyword",
                    type: "search",
                    value: ""
                },
                {
                    label: "取证方式",
                    code: "getType",
                    type: "radio",
                    value: "",
                    data: [
                        { name: "全部", value: "", active: true },
                        { name: "现场取件", value: "1", active: false },
                        { name: "到付邮寄", value: "0", active: false }
                    ]
                },
                {
                    label: "所属区域",
                    code: "areaCode",
                    type: "radio",
                    value: "",
                    data: [{ name: "全部", value: "", active: true }]
                }
            ],
         detailColumns: [
                {
                    title: "申请单位/人",
                    dataIndex: "applyPersonName"
                },
                {
                    title: "证件类型",
                    dataIndex: "cardTypeName"
                },
                {
                    title: "证件号码",
                    dataIndex: "cardNum"
                },
                {
                    title: "证件有效期",
                    dataIndex: "s",
                    render: row => {
                        if (!row.startTime) {
                            return "-";
                        }
                        let startTime = row.startTime.substr(0, 10);
                        let endTime = "-";
                        if(row.endTime){
                            endTime = row.endTime.substr(0, 10);
                        }
                        return `${startTime} 至 ${endTime}`;
                    }
                },
                {
                    title: "证件附件",
                    type: "img",
                    dataIndex: "filePath"
                },
                {
                    title: "地址",
                    dataIndex: "applyPersonAddress"
                },
                {
                    title: "办理事项",
                    dataIndex: "handleInfoName"
                },
                {
                    title: "经办人",
                    dataIndex: "handlePersonName"
                },
                {
                    title: "联系电话",
                    dataIndex: "handlePersonTelNo"
                },
                {
                    title: "取证方式",
                    dataIndex: "getTypeName"
                },
                {
                    title: "备注",
                    dataIndex: "remark"
                }

                // {
                //     title: "是否制证",
                //     dataIndex: "maked"
                // }
            ]
        };
    },
    methods: {
        /**
         * 搜索栏回调
         */
        onSearchCallback(re = {}) {
            let request = Object.assign(this.listRequest, re);
            this.listRequest = request;
            this.getList();
        },
        /**
         * 设置table某一项class
         */
        tableRowClassName({ row, rowIndex }) {
            if (row.receiptStatus === "未接收") {
                return "warning-row";
            }
            if (rowIndex % 2 === 0) {
                return "even-row";
            } else {
                return "odd-row";
            }
        },
        /**
         * 设置选中项
         */
        handleSelectionChange(e = []) {
            e.map(item => {
                this.multipleSelection.push(item.id);
            });
        },
        /**
         * 查看详情
         */
        onDetail(e) {
            // this.detailData=e||{};//传参
            getZzDetailById({ id: e.id }).then((result = {}) => {
                this.detailData = result.data || {}; //传参
            });
            this.detailVisible = true;
        },
        /**
         * 删除
         */
        deleteHandler(e) {
            console.log(e);
            // deletePretrial({ id: e.id }).then((res = {}) => {
            //   this.$message({
            //     message: "删除成功",
            //     type: "success"
            //   });
            //   this.getList();
            // });
        },
        /**
         * 驳回
         */
        rejectHandler(e) {
            this.rejectItem = e;
            this.rejectVisible = true;
        },

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.listRequest.pageNum = val;
            this.getList();
        },
        /**
         * 操作按钮点击事件
         */
        openModal(type, values) {
            if (type == "dispatch") {
                this.dispatch(values);
                return;
            }
            Pubsub.publish(type, values);
        },
        getList() {
            getMakeCardList(this.listRequest).then((res = {}) => {
                this.tableData = res.rows;
                this.total = res.total || 0;
            });
        },
        dispatch(values) {
            this.$confirm("请确认是否分发?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    distribute({ ids: this.multipleSelection }).then(
                        (res = {}) => {
                            this.$message({
                                type: "success",
                                message: "分发成功!"
                            });
                            this.multipleSelection = [];
                            this.getList();
                        }
                    );
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消"
                    });
                });
        },
        /**
         * 获取数据字典--区域
         */
        getDictCode() {
            findByDictCode({ dictCode: "areaCode" }).then((res = {}) => {
                if (res.data && res.data.length) {
                    this.areaCode = res.data || [];
                    res.data.map(item => {
                        this.searchConfig[2].data.push({
                            name: item.dictDataName,
                            value: item.dictDataCode,
                            active: false
                        });
                    });
                }
            });
        }
    },
    created() {
        this.getList();
        this.getDictCode();
    }
};
</script>

<style lang = "scss" scoped>
.wrapper {
    margin: 20px;
    background: #fff;
}
.titel-row {
    display: flex;
    align-items: center;
    .home-icon {
        height: 50px;
        width: 50px;
        background: #1a36a9;
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .title {
        font-size: 22px;
        color: #272c67;
    }
}
.content {
    padding: 0 20px 80px 20px;
}
.pager {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
}
.table-wrapper {
    position: relative;
    margin-top: 46px;
    .handle-row {
        position: absolute;
        top: -40px;
        right: 0;
        display: flex;
        justify-content: flex-end;
    }
    .handle-btn {
        width: 76px;
        height: 30px;
        border-radius: 3px;
        margin-right: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
            margin-right: 10px;
        }
        &:last-child {
            margin-right: 0;
        }
        &:active {
            opacity: 0.8;
        }
        &.main {
            background: #1a36a9;
            color: #fff;
        }
        &.green {
            background: #007130;
            color: #fff;
        }
        &.default {
            background: #e5e5e5;
        }
        &:disabled {
            background: #999;
            opacity: 1;
        }
    }
}
</style>
<style>
</style>
